<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font: 14px 'Microsoft YaHei UI';
        }

        #header, #nav {
            line-height: 80px;
            text-align: center;
            background: #cccccc;
            overflow: hidden;
        }

        #nav {
            line-height: 40px;
            margin-top: 20px;
        }

        #nav a {
            color: black;
            margin: 0 30px;
        }

        #main {
            width: 80%;
            margin: auto;
            display: flex;
            justify-content: space-between;
        }

        #main article {
            width: 60%;
        }

        #main aside {
            width: 30%;
        }

        #main aside ul {
            /*list-style: none;*/
            padding: 10px;
        }

        #footer {
            background: #cccccc;
            padding: 40px 0;
            font-size: 12px;
            text-align: center;
        }

        #footer nav a {
            color: #333333;
        }
    </style>
</head>
<body>

<header id="header"><h1>尚硅谷</h1></header>
<nav id="nav">
    <a href="javascript:">首页</a>
    <a href="javascript:">课程</a>
    <a href="javascript:">关于我们</a>
    <a href="javascript:">联系我们</a>
</nav>
<div id="main">
    <article>
        <h2>如何快速致富</h2>
        <section>
            <h3>学前端</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, quae tempore. Ad assumenda at aut,
                dicta dolor ipsum iure labore minima natus nisi perspiciatis porro quam quia recusandae veritatis.
                Expedita.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, quae tempore. Ad assumenda at aut,
                dicta dolor ipsum iure labore minima natus nisi perspiciatis porro quam quia recusandae veritatis.
                Expedita.</p>
        </section>
        <section>
            <h3>学Java</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, quae tempore. Ad assumenda at aut,
                dicta dolor ipsum iure labore minima natus nisi perspiciatis porro quam quia recusandae veritatis.
                Expedita.</p>
        </section>
        <section>
            <h3>学大数据</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, quae tempore. Ad assumenda at aut,
                dicta dolor ipsum iure labore minima natus nisi perspiciatis porro quam quia recusandae veritatis.
                Expedita.</p>
        </section>
    </article>
    <aside>
        <h2>热门文章</h2>
        <ul>
            <li><a href="javascript:">Lorem ipsum dolor sit amet.</a></li>
            <li><a href="javascript:">Lorem ipsum dolor sit amet.</a></li>
            <li><a href="javascript:">Lorem ipsum dolor sit amet.</a></li>
            <li><a href="javascript:">Lorem ipsum dolor sit amet.</a></li>
            <li><a href="javascript:">Lorem ipsum dolor sit amet.</a></li>
        </ul>
    </aside>
</div>
<footer id="footer">
    <nav>
        <a href="javascript:">首页</a>
        <a href="javascript:">课程</a>
        <a href="javascript:">关于我们</a>
        <a href="javascript:">联系我们</a>
    </nav>
    <div>&copy;版权所有 2019</div>
</footer>

<script type="text/javascript">
    function avg() {
        // console.log(arguments.eval());
        console.log(arguments.length);
        let sum = 0;
        for (let argument of arguments) {
            sum += argument;
        }
        return sum / arguments.length;
    }

    console.log(avg(1, 2));
</script>

</body>
</html>